
<!DOCTYPE html
  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh_cn">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   
      <title>5.7.&nbsp;&#26696;&#20363;&#65306;Zoom Textarea [&#28145;&#20837;&#27973;&#20986; Greasemonkey]</title>
      <link rel="shortcut icon" href="/favicon.ico">
      <link rel="stylesheet" href="../css/dig.css" type="text/css">
      <meta http-equiv="Link" content='&lt;../css/modern.css&gt;; type="text/css"; rel=stylesheet, &lt;../css/empty.css&gt;; type="text/css";
      rel=stylesheet'>
      <link rev="made" href="mailto:mark@diveintomark.org">
      <meta name="generator" content="DocBook XSL Stylesheets V1.68.1">
      <meta name="keywords" content="Firefox, Greasemonkey, Javascript, user script, userscript">
      <link rel="start" href="../toc/index.html" title="&#28145;&#20837;&#27973;&#20986; Greasemonkey">
      <link rel="up" href="index.html" title="&#31532;&nbsp;5&nbsp;&#31456;&nbsp;&#23454;&#20363;&#25945;&#23398;">
      <link rel="prev" href="frownies.html" title="5.6.&nbsp;&#26696;&#20363;&#65306;Frownies">
      <link rel="next" href="accessbar.html" title="5.8.&nbsp;&#26696;&#20363;&#65306;Access Bar">
   </head>
   <body id="diveintogreasemonkey-org" class="casestudy-zoomtextarea">
      <div class="z" id="intro">
         <div class="sectionInner">
            <div class="sectionInner2">
               <div class="s">
                  <h1><a href="/" accesskey="1">&#28145;&#20837;&#27973;&#20986; Greasemonkey</a></h1>
                  <p>&#25945;&#32769;&#32593;&#32476;&#23398;&#26032;&#25226;&#25103;</p>
               </div>
               <div class="s">
                  <ul>
                     <li><a href="../">&#36215;&#22987;&#39029;</a> &middot; 
                     </li>
                     <li><a href="../toc/">&#30446;&#24405;</a> &middot; 
                     </li>
                     <li><a href="../download/">&#19979;&#36733;</a> &middot; 
                     </li>
                     <li><a href="http://greasemonkey.mozdev.org/">&#31435;&#21363;&#19979;&#36733; Greasemonkey</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
      <div id="main">
         <div id="mainInner">
            <p id="breadcrumb">&#24744;&#30340;&#20301;&#32622;&#65306;<a href="../">&#36215;&#22987;&#39029;</a> &#8594; <a href="../toc/index.html">&#30446;&#24405;</a> &#8594; <a href="index.html">&#23454;&#20363;&#25945;&#23398;</a> &#8594; <span class="thispage">&#26696;&#20363;&#65306;Zoom Textarea</span></p>
            <div class="section" lang="zh_cn">
               <div class="titlepage">
                  <div>
                     <div>
                        <h2 class="title"><a name="casestudy.zoomtextarea" class="skip" href="#casestudy.zoomtextarea" title="link to this section"><img src="../images/permalink.gif" alt="[link]" title="link to this section" width="8" height="9"></a> 5.7.&nbsp;&#26696;&#20363;&#65306;Zoom Textarea
                        </h2>
                     </div>
                     <div>
                        <h3 class="subtitle">&#28155;&#21152;&#32553;&#25918; textareas &#30340;&#25353;&#38062;</h3>
                     </div>
                     <div>
                        <div class="abstract">
                           <h3 class="title"></h3>
                           <p>Zoom Textarea &#25913;&#21464;&#20102;&#32593;&#39029;&#20013;&#30340;&#34920;&#21333;&#65292;&#22312;&#27599;&#20010; <code class="sgmltag-element">&lt;textarea&gt;</code> &#20803;&#32032;(&#29992;&#20110;&#36755;&#20837;&#22810;&#34892;&#25991;&#26412;)&#19978;&#26041;&#21152;&#19978;&#20102;&#19968;&#20010;&#24037;&#20855;&#26639;&#12290;&#36825;&#20010;&#24037;&#20855;&#26639;&#21487;&#20197;&#25918;&#22823;&#25110;&#32553;&#23567; <code class="sgmltag-element">&lt;textarea&gt;</code>&#20013;&#25991;&#26412;&#30340;&#22823;&#23567;&#65292;&#32780;&#19981;&#20250;&#25913;&#21464;&#39029;&#38754;&#20013;&#20854;&#20182;&#22320;&#26041;&#30340;&#26679;&#24335;&#12290;&#36825;&#20123;&#25353;&#38062;&#20063;&#21487;&#20197;&#23436;&#20840;&#29992;&#38190;&#30424;&#26469;&#25805;&#20316;&#30340;&#65307;&#29992; tab &#31227;&#21160;&#28966;&#28857;&#21040;&#25353;&#38062;&#19978;&#28982;&#21518;&#25353; <strong class="userinput"><code><span><strong class="keycap">&#22238;&#36710;&#38190;</strong></span></code></strong>&#65292;&#20195;&#26367;&#40736;&#26631;&#28857;&#20987;&#25805;&#20316;&#12290;(&#25105;&#21069;&#38754;&#25552;&#21040;&#30340;&#26159;&#30001;&#20110;&#26131;&#29992;&#24615;&#38382;&#39064;(accessibility matters)&#65292;&#28982;&#32780;&#23454;&#38469;&#19978;&#65292;&#29992;&#36215;&#26469;&#27604;&#21548;&#36215;&#26469;&#38590;)
                           </p>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="example"><a name="example.casestudy.zoomtextarea" class="skip" href="#example.casestudy.zoomtextarea" title="link to this example"><img src="../images/permalink.gif" alt="[link]" title="link to this example" width="8" height="9"></a> 
                  <h3 class="title">&#20363;&nbsp;5.7.&nbsp;
                     <a href="http://www.firefox.net.cn/dig/download/zoomtextarea.user.js" title="Download Zoom Textarea">
                        <code class="filename">zoomtextarea.user.js</code>
                        </a>
                     
                  </h3><pre class="programlisting ">// ==UserScript==
// @name          Zoom Textarea
// @namespace     http://diveintogreasemonkey.org/download/
// @description   add controls to zoom textareas
// @include       *
// ==/UserScript==

var textareas, textarea;

textareas = document.getElementsByTagName('textarea');
if (!textareas.length) { return; }

function textarea_zoom_in(event) {
	var link, textarea, s;
	link = event.currentTarget;
	textarea = link._target;
	s = getComputedStyle(textarea, "");
	textarea.style.width = (parseFloat(s.width) * 1.5) + "px";
	textarea.style.height = (parseFloat(s.height) * 1.5) + "px";
	textarea.style.fontSize = (parseFloat(s.fontSize) + 7.0) + 'px';
	event.preventDefault();
}

function textarea_zoom_out(event) {
	var link, textarea, s;
	link = event.currentTarget;
	textarea = link._target;
	s = getComputedStyle(textarea, "");
	textarea.style.width = (parseFloat(s.width) * 2.0 / 3.0) + "px";
	textarea.style.height = (parseFloat(s.height) * 2.0 / 3.0) + "px";
	textarea.style.fontSize = (parseFloat(s.fontSize) - 7.0) + "px";
	event.preventDefault();
}

function createButton(target, func, title, width, height, src) {
	var img, button;
	img = document.createElement('img');
	img.width = width;
	img.height = height;
	img.style.borderTop = img.style.borderLeft = "1px solid #ccc";
	img.style.borderRight = img.style.borderBottom = "1px solid #888";
	img.style.marginRight = "2px";
	img.src = src;
	button = document.createElement('a');
	button._target = target;
	button.title = title;
	button.href = '#';
	button.onclick = func;
	button.appendChild(img);
	return button;
}

for (var i = 0; i &lt; textareas.length; i++) {
	textarea = textareas[i];
	textarea.parentNode.insertBefore(
		createButton(
			textarea,
			textarea_zoom_in,
			'Increase textarea size',
			20,
			20,
			'data:image/gif;base64,'+
			'R0lGODlhFAAUAOYAANPS1tva3uTj52NjY2JiY7KxtPf3%2BLOys6WkpmJiYvDw8fX19vb'+
			'296Wlpre3uEZFR%2B%2Fv8aqpq9va3a6tr6Kho%2Bjo6bKytZqZml5eYMLBxNra21JSU3'+
			'Jxc3RzdXl4emJhZOvq7KamppGQkr29vba2uGBgYdLR1dLS0lBPUVRTVYB%2Fgvj4%2BYK'+
			'Bg6SjptrZ3cPDxb69wG1tbsXFxsrJy29vccDAwfT09VJRU6uqrFlZW6moqo2Mj4yLjLKy'+
			's%2Fj4%2BK%2Busu7t783Nz3l4e19fX7u6vaalqNPS1MjHylZVV318ftfW2UhHSG9uccv'+
			'KzfHw8qqqrNPS1eXk5tvb3K%2BvsHNydeLi40pKS2JhY2hnalpZWlVVVtDQ0URDRJmZm5'+
			'mYm11dXp2cnm9vcFxcXaOjo0pJSsC%2FwuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
			'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC'+
			'H5BAAAAAAALAAAAAAUABQAAAeagGaCg4SFhoeIiYqKTSQUFwgwi4JlB0pOCkEiRQKKRxM'+
			'gKwMGDFEqBYpPRj4GAwwLCkQsijwQBAQJCUNSW1mKSUALNiVVJzIvSIo7GRUaGzUOPTpC'+
			'igUeMyNTIWMHGC2KAl5hCBENYDlcWC7gOB1LDzRdWlZMAZOEJl83VPb3ggAfUnDo5w%2F'+
			'AFRQxJPj7J4aMhYWCoPyASFFRIAA7'),
		textarea);
	textarea.parentNode.insertBefore(
		createButton(
			textarea,
			textarea_zoom_out,
			'Decrease textarea size',
			20,
			20,
			'data:image/gif;base64,'+
			'R0lGODlhFAAUAOYAANPS1uTj59va3vDw8bKxtGJiYrOys6Wkpvj4%2BPb29%2FX19mJiY'+
			'%2Ff3%2BKqqrLe3uLKytURDRFpZWqmoqllZW9va3aOjo6Kho4KBg729vWJhZK%2BuskZF'+
			'R4B%2FgsLBxHNydY2Mj%2Ff396amptLS0l9fX9fW2dDQ0W1tbpmZm8DAwfT09fHw8n18f'+
			'uLi49LR1V5eYOjo6VBPUa6tr769wEhHSNra20pJStPS1KuqrNPS1ZmYm%2B7t77Kys8rJ'+
			'y%2Fj4%2BaSjpm9uca%2BvsMjHyqalqHRzdVJRU8PDxVRTVcvKzc3Nz0pKS9rZ3evq7MC'+
			'%2FwsXFxp2cnnl4e1VVVu%2Fv8ba2uM7Oz29vcbu6vZqZmnJxc9vb3PHx8uXk5mhnamJh'+
			'Y1xcXZGQklZVV29vcHl4eoyLjKqpq6Wlpl1dXuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
			'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
			'AAACH5BAAAAAAALAAAAAAUABQAAAeZgGaCg4SFhoeIiYqKR1IWVgcyi4JMBiQqA0heQgG'+
			'KQTFLPQgMCVocBIoNNqMgCQoDVReKYlELCwUFI1glEYorOgopWSwiTUVfih8dLzRTKA47'+
			'Ek%2BKBGE8GEAhFQYuPooBOWAHY2ROExBbSt83QzMbVCdQST8Ck4QtZUQe9faCABlGrvD'+
			'rB4ALDBMU%2BvnrUuOBQkE4NDycqCgQADs%3D'),
		textarea);
	textarea.parentNode.insertBefore(
		document.createElement('br'),
		textarea);
}</pre></div>
               <p>&#36825;&#27573;&#20195;&#30721;&#30475;&#36215;&#26469;&#24456;&#22797;&#26434;&#65292;&#32780;&#19988;&#23427;&#30830;&#23454;&#22797;&#26434;&#65292;&#20294;&#26159;&#26377;&#29305;&#27530;&#21407;&#22240;&#30340;&#12290;&#30475;&#36215;&#26469;&#24456;&#22797;&#26434;&#26159;&#22240;&#20026;&#23427;&#20013;&#38388;&#26377;&#22823;&#27573;&#30340;&#20081;&#30721;&#20284;&#30340;&#23383;&#31526;&#20018;&#12290;&#36825;&#20123;&#26159;<a href="../patterns/add-image.html" title="4.12.&nbsp;&#22312;&#27809;&#26377;&#26381;&#21153;&#22120;&#30340;&#24773;&#20917;&#19979;&#28155;&#21152;&#22270;&#29255;">&#30340; <code class="systemitem">data:</code> <acronym title="Uniform Resource Identifier">URI</acronym>s</a>&#65292;&#23427;&#20204;&#30475;&#36215;&#26469;&#20687;&#22320;&#29425;&#21364;&#24456;&#23481;&#26131;&#29983;&#25104;&#12290;&#30495;&#27491;&#22797;&#26434;&#30340;&#22320;&#26041;&#36824;&#22312;&#21035;&#22788;&#12290;
               </p>
               <p>&#39318;&#20808;&#65292;&#25105;&#33719;&#21462;&#20102;&#39029;&#38754;&#19978;&#25152;&#26377;&#30340; <code class="sgmltag-element">&lt;textarea&gt;</code> &#20803;&#32032;&#38598;&#12290;&#27492;&#27169;&#24335;&#30340;&#35814;&#24773;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/iterate-one-element.html" title="4.5.&nbsp;&#25805;&#20316;&#29305;&#23450; HTML &#20803;&#32032;&#30340;&#25152;&#26377;&#23454;&#20363;">&#25805;&#20316;&#29305;&#23450; <acronym title="HyperText Markup Language">HTML</acronym> &#20803;&#32032;&#30340;&#25152;&#26377;&#23454;&#20363;</a>&#12290;&#22914;&#26524;&#27809;&#26377;&#65292;&#37027;&#23601;&#27809;&#24517;&#35201;&#32487;&#32493;&#20102;&#65292;&#25152;&#20197; <code class="constant">return</code>(&#36820;&#22238;)&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">textareas = document.getElementsByTagName('textarea');
if (!textareas.length) { return; }</pre></div>
               <p>&#29616;&#22312;&#65292;&#25105;&#20204;&#36305;&#19979;&#39064;&#12290;&#25105;&#20204;&#30340;&#8220;<span class="quote">&#24037;&#20855;&#26639;</span>&#8221;&#30475;&#36215;&#26469;&#20687;&#26159;&#19968;&#34892;&#25353;&#38062;&#65292;&#20294;&#26159;&#27599;&#20010;&#25353;&#38062;&#23601;&#26159;&#30475;&#36215;&#26469;&#21487;&#20197;&#28857;&#30340;&#26576;&#20123;&#22270;&#29255;&#65292;&#22806;&#38754;&#21253;&#19978;&#19968;&#20010;&#33021;&#25191;&#34892;&#25105;&#20204;&#30340; Javascript &#20989;&#25968;&#30340;&#38142;&#25509;&#12290;
               </p>
               <p>&#30001;&#20110;&#25105;&#20204;&#35201;&#21019;&#24314;&#22810;&#20010;&#25353;&#38062;(&#23613;&#31649;&#36825;&#20010;&#33050;&#26412;&#21482;&#26377;&#20004;&#20010;&#25353;&#38062;&#65292;&#20294;&#26159;&#24744;&#21487;&#20197;&#20415;&#21033;&#22320;&#25193;&#23637;&#20986;&#26356;&#22810;&#21151;&#33021;)&#65292;&#25105;&#21019;&#24314;&#20102;&#19968;&#20010;&#20989;&#25968;&#26469;&#23553;&#35013;&#25152;&#26377;&#30340;&#21046;&#36896;&#25353;&#38062;&#30340;&#36923;&#36753;&#12290;</p>
               <div class="informalexample"><pre class="programlisting ">function createButton(target, func, title, width, height, src) {</pre><p>The <code class="function">createButton</code> function takes 6 arguments:
                  </p>
                  <div class="variablelist">
                     <dl>
                        <dt><span class="term">
                              <em class="parameter"><code>target</code></em>
                              </span></dt>
                        <dd>&#20803;&#32032;&#23545;&#35937;&#65292;&#25353;&#38062;&#25511;&#21046;&#30340; <code class="sgmltag-element">&lt;textarea&gt;</code> &#20803;&#32032;
                        </dd>
                        <dt><span class="term">
                              <em class="parameter"><code>func</code></em>
                              </span></dt>
                        <dd>&#20989;&#25968;&#23545;&#35937;&#65292;&#24403;&#29992;&#25143;&#29992;&#40736;&#26631;&#28857;&#20987;&#25110;&#38190;&#30424;&#28608;&#27963;&#36825;&#20010;&#25353;&#38062;&#26102;&#65292;&#35843;&#29992;&#30340; Javascript &#20989;&#25968;</dd>
                        <dt><span class="term">
                              <em class="parameter"><code>title</code></em>
                              </span></dt>
                        <dd>&#23383;&#31526;&#20018;&#65292;&#40736;&#26631;&#31227;&#21160;&#21040;&#25353;&#38062;&#19978;&#26174;&#31034;&#30340;&#25552;&#31034;&#25991;&#23383;</dd>
                        <dt><span class="term">
                              <em class="parameter"><code>width</code></em>
                              </span></dt>
                        <dd>&#25972;&#25968;&#65292;&#25353;&#38062;&#30340;&#23485;&#24230;&#12290;&#23427;&#24212;&#35813;&#19982; <em class="parameter"><code>src</code></em> &#21442;&#25968;&#25552;&#20379;&#30340;&#22270;&#24418;&#23454;&#38469;&#23485;&#24230;&#19968;&#33268;&#12290;
                        </dd>
                        <dt><span class="term">
                              <em class="parameter"><code>height</code></em>
                              </span></dt>
                        <dd>&#25972;&#25968;&#65292;&#25353;&#38062;&#30340;&#39640;&#24230;&#12290;&#23427;&#24212;&#35813;&#19982; <em class="parameter"><code>src</code></em> &#21442;&#25968;&#25552;&#20379;&#30340;&#22270;&#24418;&#23454;&#38469;&#39640;&#24230;&#19968;&#33268;&#12290;
                        </dd>
                        <dt><span class="term">
                              <em class="parameter"><code>src</code></em>
                              </span></dt>
                        <dd>&#23383;&#31526;&#20018;&#65292;<acronym title="Uniform Resource Locator">URL</acronym>&#12289;&#36335;&#24452;&#25110;&#32773;&#25353;&#38062;&#22270;&#24418;&#30340; <code class="systemitem">data:</code> <acronym title="Uniform Resource Identifier">URI</acronym></dd>
                     </dl>
                  </div>
               </div>
               <p>&#21019;&#24314;&#19968;&#20010;&#25353;&#38062;&#20998;&#20026;&#20004;&#20010;&#27493;&#39588;&#65306;&#21019;&#24314; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#65292;&#28982;&#21518;&#21019;&#24314;&#20854;&#22806;&#30340; <code class="sgmltag-element">&lt;a&gt;</code> &#20803;&#32032;&#12290;
               </p>
               <p>&#25105;&#35843;&#29992; <code class="function">document.createElement</code> &#26469;&#21019;&#24314; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#65292;&#24182;&#19988;&#35774;&#32622;&#20102;&#19968;&#23567;&#37096;&#20998;&#23646;&#24615;&#65292;&#21253;&#21547;&#26679;&#24335;&#30340;&#23646;&#24615;&#12290;&#20851;&#20110;&#27492;&#27169;&#24335;&#30340;&#26356;&#22810;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/set-style.html" title="4.15.&nbsp;&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;">&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">img = document.createElement('img');
img._target = target;
img.width = width;
img.height = height;
img.style.borderTop = img.style.borderLeft = "1px solid #ccc";
img.style.borderRight = img.style.borderBottom = "1px solid #888";
img.style.marginRight = "2px";
img.src = src;</pre></div>
               <p>&#36825;&#37324;&#26377;&#20010;&#24456;&#37239;&#30340;&#25216;&#24039;&#65292;&#24744;&#21487;&#20197;&#20351;&#29992;&#19979;&#38754;&#30340;&#35821;&#27861;&#21516;&#26102;&#20026;&#20004;&#20010;&#23646;&#24615;&#36171;&#19978;&#30456;&#21516;&#30340;&#20540;&#65306;</p>
               <div class="informalexample"><pre class="programlisting ">img.style.borderTop = img.style.borderLeft = "1px solid #ccc";</pre></div>
               <p>OK, &#32487;&#32493;&#21069;&#36827;&#12290;&#21019;&#24314;&#25353;&#38062;&#30340;&#31532;&#20108;&#37096;&#20998;&#26159;&#21019;&#24314;&#38142;&#25509;(<code class="sgmltag-element">&lt;a&gt;</code> &#20803;&#32032;)&#65292;&#28982;&#21518;&#25226; <code class="sgmltag-element">&lt;img&gt;</code> &#20803;&#32032;&#25918;&#22312;&#37324;&#38754;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">button = document.createElement('a');
button._target = target;
button.title = title;
button.href = '#';
button.onclick = func;
button.appendChild(img);</pre></div>
               <p>&#25105;&#24819;&#25351;&#20986;&#20004;&#28857;&#12290;&#31532;&#19968;&#65292;&#25105;&#38656;&#35201;&#36171;&#32473;&#38142;&#25509;&#20266;&#36896;&#30340; <code class="property">href</code> &#23646;&#24615;&#65292;&#21542;&#21017; Firefox &#20250;&#25226;&#23427;&#24403;&#20316;&#21629;&#21517;&#38170;&#24182;&#19988;&#19981;&#20250;&#25226;&#23427;&#21152;&#21040; tab &#32034;&#24341;&#20013;(&#20063;&#23601;&#26159;&#24744;&#26080;&#27861;&#36890;&#36807; tab &#31227;&#21160;&#23427;&#19978;&#38754;&#65292;&#20063;&#23601;&#26080;&#27861;&#36890;&#36807;&#38190;&#30424;&#20351;&#29992;)&#12290;&#31532;&#20108;&#65292;&#25105;&#35774;&#32622;&#20102; <code class="property">_target</code> &#23646;&#24615;&#26469;&#20445;&#23384;&#30446;&#26631; <code class="sgmltag-element">&lt;textarea&gt;</code> &#30340;&#24341;&#29992;&#12290;&#36825;&#22312; Javascript &#20013;&#26159;&#23436;&#20840;&#21512;&#27861;&#30340;&#65307;&#24744;&#21482;&#38656;&#35201;&#32473;&#26032;&#23646;&#24615;&#36171;&#20540;&#65292;&#23601;&#21487;&#20197;&#32473;&#23545;&#35937;&#21019;&#24314;&#26032;&#23646;&#24615;&#12290;&#31245;&#21518;&#65292;&#22312; <code class="systemitem">onclick</code> &#30340;&#20107;&#20214;&#21477;&#26564;&#20013;&#65292;&#25105;&#20250;&#35775;&#38382;&#36825;&#20010;&#33258;&#23450;&#20041;&#30340; <code class="property">_target</code> &#23646;&#24615;&#12290;
               </p>
               <p>&#29616;&#22312;&#65292;&#35753;&#25105;&#20204;&#36339;&#22238;&#21040; <code class="systemitem">onclick</code> &#21477;&#26564;&#12290;&#27599;&#20010;&#21477;&#26564;&#37117;&#26159;&#19968;&#20010;&#20989;&#25968;&#65292;&#26377;&#19968;&#20010;&#21442;&#25968;&#65306;<em class="parameter"><code>event</code></em>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">function textarea_zoom_in(event)</pre></div>
               <p><code class="varname">event</code> &#23545;&#35937;&#26377;&#35768;&#22810;&#23646;&#24615;&#65292;&#29616;&#22312;&#25105;&#24863;&#20852;&#36259;&#30340;&#21482;&#26377;&#19968;&#20010;&#65306;<code class="property">currentTarget</code>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">link = event.currentTarget;</pre></div>
               <p>&#22914;&#26524;&#24744;&#38405;&#35835;&#36807;<a href="http://www.xulplanet.com/references/objref/Event.html">&#20851;&#20110; <code class="classname">Event</code> &#23545;&#35937;&#30340;&#25991;&#26723;</a>&#65292;&#24744;&#21487;&#20197;&#35835;&#21040;&#24456;&#22810;&#30446;&#26631;&#30456;&#20851;&#30340;&#23646;&#24615;&#65292;&#21253;&#21547;&#19968;&#20010;&#31616;&#21333;&#30340;&#65306;<code class="property">target</code>&#12290;&#24744;&#21487;&#33021;&#24456;&#24819;&#20351;&#29992; <code class="property">event.target</code> &#21435;&#33719;&#21462;&#24050;&#35775;&#38382;&#30340;&#38142;&#25509;&#65292;&#20294;&#26159;&#23427;&#34920;&#29616;(&#20381;&#25105;&#30475;&#26469;)&#19981;&#19968;&#33268;&#12290;&#24403;&#29992;&#25143; tab &#21040;&#25353;&#38062;&#19978;&#28982;&#21518;&#25970;<strong class="userinput"><code><span><strong class="keycap">&#22238;&#36710;&#38190;</strong></span></code></strong>&#65292;<code class="property">event.target</code> &#26159;&#36825;&#20010;&#38142;&#25509;&#65292;&#20294;&#26159;&#24403;&#29992;&#25143;&#29992;&#40736;&#26631;&#28857;&#20987;&#25353;&#38062;&#26102;&#65292;<code class="property">event.target</code> &#26159;&#38142;&#25509;&#20013;&#30340;&#22270;&#29255;&#65281;&#25105;&#24819;&#36825;&#32943;&#23450;&#26377;&#20010;&#21512;&#29702;&#30340;&#35299;&#37322;&#65292;&#20294;&#26159;&#23427;&#36229;&#36807;&#20102;&#25105;&#23545; DOM &#20107;&#20214;&#27169;&#22411;&#30340;&#29702;&#35299;&#23618;&#27425;&#12290;&#26080;&#35770;&#22914;&#20309;&#65292;<code class="property">event.currentTarget</code> &#22312;&#25152;&#26377;&#24773;&#20917;&#19979;&#37117;&#36820;&#22238;&#38142;&#25509;&#65292;&#25152;&#20197;&#25105;&#20351;&#29992;&#23427;&#12290;
               </p>
               <p>&#19979;&#19968;&#27493;&#25105;&#21462;&#22238;&#20102;&#30446;&#21069;&#25171;&#31639;&#32553;&#25918;&#30340; <code class="sgmltag-element">&lt;textarea&gt;</code> &#30340;&#24341;&#29992;&#65292;&#36890;&#36807;&#33258;&#23450;&#20041;&#30340; <code class="property">_target</code> &#23646;&#24615;&#65292;&#25105;&#22312;&#21019;&#24314;&#25353;&#38062;&#26102;&#35774;&#32622;&#20102;&#36825;&#20010;&#23646;&#24615;&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">    textarea = link._target;</pre></div>
               <p>&#29616;&#22312;&#22909;&#25103;&#21018;&#21018;&#24320;&#22987;&#12290;(&#24744;&#35748;&#20026;&#24744;&#24050;&#32463;&#25214;&#21040;&#20048;&#36259;&#20102;&#21527;&#65281;)&#25105;&#38656;&#35201;&#33719;&#24471; <code class="sgmltag-element">&lt;textarea&gt;</code> &#24403;&#21069;&#30340;&#38271;&#23485;&#21644;&#23383;&#20307;&#22823;&#23567;&#65292;&#36825;&#26679;&#25105;&#23601;&#21487;&#20197;&#25226;&#23427;&#20204;&#25918;&#22823;&#12290;&#31616;&#21333;&#30340;&#20174;<code class="property">textarea.style</code> (<code class="property">textarea.style.width</code>, <code class="property">textarea.style.height</code> &#21644; <code class="property">textarea.style.fontSize</code>)&#20013;&#33719;&#24471;&#36866;&#21512;&#30340;&#23646;&#24615;&#24182;<span class="emphasis"><em>&#19981;</em></span>&#31649;&#29992;&#65292;&#22240;&#20026;&#21482;&#26377;&#22312; <code class="sgmltag-element">&lt;textarea&gt;</code> &#30340; <code class="sgmltag-attribute">style</code> &#23646;&#24615;&#20013;&#23450;&#20041;&#23427;&#20204;&#30340;&#26102;&#20505;&#25165;&#33021;&#24471;&#21040;&#20540;&#12290;&#36825;&#19981;&#26159;&#25105;&#24819;&#35201;&#30340;&#65307;&#25105;&#35201;&#24471;&#21040;&#30495;&#23454;&#30340;&#24403;&#21069;&#26679;&#24335;&#12290;&#25105;&#38656;&#35201;&#30340;&#26159; <code class="function">getComputedStyle</code>.  &#20851;&#20110;&#27492;&#20989;&#25968;&#30340;&#26356;&#22810;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/getcomputedstyle.html" title="4.14.&nbsp;&#33719;&#21462;&#20803;&#32032;&#26679;&#24335;">&#33719;&#21462;&#20803;&#32032;&#26679;&#24335;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">s = getComputedStyle(textarea, "");
textarea.style.width = (parseFloat(s.width) * 1.5) + "px";
textarea.style.height = (parseFloat(s.height) * 1.5) + "px";
textarea.style.fontSize = (parseFloat(s.fontSize) + 7.0) + 'px';</pre></div>
               <p>&#26368;&#21518;&#65292;&#24744;&#36824;&#35760;&#24471;&#25353;&#38062;&#38142;&#25509;&#19978;&#20026;&#20102;&#38190;&#30424;&#26131;&#29992;&#26032;&#32780;&#21152;&#30340;&#20266;&#36896;&#30340; <code class="property">href</code> &#20540;&#21527;&#65311;&#21999;&#65292;&#23427;&#24050;&#32463;&#21464;&#25104;&#20102;&#28902;&#24700;&#65292;&#22240;&#20026; Firefox &#25191;&#34892;&#23436; <code class="systemitem">onclick</code> &#21477;&#26564;&#21518;&#65292;&#23427;&#23601;&#20250;&#23581;&#35797;&#36339;&#36716;&#21040;&#36825;&#20010;&#38142;&#25509;&#12290;&#22240;&#20026;&#23427;&#25351;&#21521;&#20102;&#19981;&#23384;&#22312;&#30340;&#38170;&#65292;&#26080;&#35770;&#25353;&#38062;&#22312;&#20160;&#20040;&#22320;&#26041;&#65292;Firefox  &#37117;&#20250;&#36339;&#21040;&#39029;&#38754;&#30340;&#39030;&#31471;&#12290;&#36825;&#26159;&#20214;&#24700;&#20154;&#30340;&#20107;&#65292;&#35201;&#38459;&#27490;&#23427;&#65292;&#25105;&#38656;&#35201;&#22312;&#23436;&#25104; <code class="systemitem">onclick</code> &#21477;&#26564;&#21069;&#35843;&#29992; <code class="methodname">event.preventDefault()</code>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">event.preventDefault();</pre></div>
               <p>&#33050;&#26412;&#30340;&#20854;&#20313;&#37096;&#20998;&#24456;&#31616;&#21333;&#12290;&#25105;&#36941;&#21382;&#20102;&#25152;&#26377;&#30340; <code class="sgmltag-element">&lt;textarea&gt;</code> &#20803;&#32032;&#65292;&#20026;&#20182;&#20204;&#21508;&#33258;&#21019;&#24314;&#32553;&#25918;&#25353;&#38062;(&#27599;&#20010;&#37117;&#26377;&#23427;&#33258;&#24049;&#30340; <code class="systemitem">onclick</code> &#21477;&#26564;&#21644;&#25353;&#38062;&#22270;&#29255;)&#65292;&#28982;&#21518;&#22312; <code class="sgmltag-element">&lt;textarea&gt;</code> &#21069;&#25554;&#20837;&#32553;&#25918;&#25353;&#38062;&#12290;&#23545;&#20110;&#27599;&#24352;&#22270;&#29255;&#65292;&#25105;&#20351;&#29992; <code class="systemitem">data:</code> <acronym title="Uniform Resource Identifier">URI</acronym> &#26469;&#21019;&#24314;&#20869;&#23884;&#30340;&#22270;&#29255;&#65292;&#25152;&#20197;&#29992;&#25143;&#19981;&#38656;&#35201;&#35775;&#38382;&#36828;&#31471;&#26381;&#21153;&#22120;&#21435;&#33719;&#21462;&#25353;&#38062;&#22270;&#29255;&#12290;&#20851;&#20110;&#27492;&#27169;&#24335;&#30340;&#26356;&#22810;&#20449;&#24687;&#65292;&#35831;&#38405;&#35835;<a href="../patterns/insert-before.html" title="4.7.&nbsp;&#22312;&#20803;&#32032;&#21069;&#25554;&#20837;&#20869;&#23481;">&#22312;&#20803;&#32032;&#21069;&#25554;&#20837;&#20869;&#23481;</a>&#21644;<a href="../patterns/add-image.html" title="4.12.&nbsp;&#22312;&#27809;&#26377;&#26381;&#21153;&#22120;&#30340;&#24773;&#20917;&#19979;&#28155;&#21152;&#22270;&#29255;">&#22312;&#27809;&#26377;&#26381;&#21153;&#22120;&#30340;&#24773;&#20917;&#19979;&#28155;&#21152;&#22270;&#29255;</a>&#12290;
               </p>
               <div class="informalexample"><pre class="programlisting ">for (var i = 0; i &lt; textareas.length; i++) {
	textarea = textareas[i];
	textarea.parentNode.insertBefore(
		createButton(
			textarea,
			textarea_zoom_in,
			'Increase textarea size',
			20,
			20,
			'data:image/gif;base64,'+
			'R0lGODlhFAAUAOYAANPS1tva3uTj52NjY2JiY7KxtPf3%2BLOys6WkpmJiYvDw8fX19vb'+
			'296Wlpre3uEZFR%2B%2Fv8aqpq9va3a6tr6Kho%2Bjo6bKytZqZml5eYMLBxNra21JSU3'+
			'Jxc3RzdXl4emJhZOvq7KamppGQkr29vba2uGBgYdLR1dLS0lBPUVRTVYB%2Fgvj4%2BYK'+
			'Bg6SjptrZ3cPDxb69wG1tbsXFxsrJy29vccDAwfT09VJRU6uqrFlZW6moqo2Mj4yLjLKy'+
			's%2Fj4%2BK%2Busu7t783Nz3l4e19fX7u6vaalqNPS1MjHylZVV318ftfW2UhHSG9uccv'+
			'KzfHw8qqqrNPS1eXk5tvb3K%2BvsHNydeLi40pKS2JhY2hnalpZWlVVVtDQ0URDRJmZm5'+
			'mYm11dXp2cnm9vcFxcXaOjo0pJSsC%2FwuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
			'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC'+
			'H5BAAAAAAALAAAAAAUABQAAAeagGaCg4SFhoeIiYqKTSQUFwgwi4JlB0pOCkEiRQKKRxM'+
			'gKwMGDFEqBYpPRj4GAwwLCkQsijwQBAQJCUNSW1mKSUALNiVVJzIvSIo7GRUaGzUOPTpC'+
			'igUeMyNTIWMHGC2KAl5hCBENYDlcWC7gOB1LDzRdWlZMAZOEJl83VPb3ggAfUnDo5w%2F'+
			'AFRQxJPj7J4aMhYWCoPyASFFRIAA7'),
		textarea);
	textarea.parentNode.insertBefore(
		createButton(
			textarea,
			textarea_zoom_out,
			'Decrease textarea size',
			20,
			20,
			'data:image/gif;base64,'+
			'R0lGODlhFAAUAOYAANPS1uTj59va3vDw8bKxtGJiYrOys6Wkpvj4%2BPb29%2FX19mJiY'+
			'%2Ff3%2BKqqrLe3uLKytURDRFpZWqmoqllZW9va3aOjo6Kho4KBg729vWJhZK%2BuskZF'+
			'R4B%2FgsLBxHNydY2Mj%2Ff396amptLS0l9fX9fW2dDQ0W1tbpmZm8DAwfT09fHw8n18f'+
			'uLi49LR1V5eYOjo6VBPUa6tr769wEhHSNra20pJStPS1KuqrNPS1ZmYm%2B7t77Kys8rJ'+
			'y%2Fj4%2BaSjpm9uca%2BvsMjHyqalqHRzdVJRU8PDxVRTVcvKzc3Nz0pKS9rZ3evq7MC'+
			'%2FwsXFxp2cnnl4e1VVVu%2Fv8ba2uM7Oz29vcbu6vZqZmnJxc9vb3PHx8uXk5mhnamJh'+
			'Y1xcXZGQklZVV29vcHl4eoyLjKqpq6Wlpl1dXuXk6AAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
			'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+
			'AAACH5BAAAAAAALAAAAAAUABQAAAeZgGaCg4SFhoeIiYqKR1IWVgcyi4JMBiQqA0heQgG'+
			'KQTFLPQgMCVocBIoNNqMgCQoDVReKYlELCwUFI1glEYorOgopWSwiTUVfih8dLzRTKA47'+
			'Ek%2BKBGE8GEAhFQYuPooBOWAHY2ROExBbSt83QzMbVCdQST8Ck4QtZUQe9faCABlGrvD'+
			'rB4ALDBMU%2BvnrUuOBQkE4NDycqCgQADs%3D'),
		textarea);
	textarea.parentNode.insertBefore(
		document.createElement('br'),
		textarea);
}</pre></div>
               <div class="download">
                  <h3>&#19979;&#36733;</h3>
                  <ul>
                     <li>
                        <a href="http://www.firefox.net.cn/dig/download/zoomtextarea.user.js">
                           <code class="filename">zoomtextarea.user.js</code>
                           </a>
                        
                     </li>
                  </ul>
               </div>
               <div class="furtherreading"><a href="../appendix/furtherreading.html" title="&#xA;&#8220;&#21442;&#32771;&#36164;&#26009;&#8221;&#38142;&#25509;&#28165;&#21333;">
                     <h3>&#21442;&#32771;&#36164;&#26009;</h3></a><ul>
                     <li>
                        <a href="http://www.xulplanet.com/references/objref/Event.html">
                           <code class="classname">Event</code> &#25991;&#26723;</a>
                        
                     </li>
                  </ul>
               </div>
               <div class="seealso">
                  <h3>&#21442;&#35265;</h3>
                  <ul>
                     <li>
                        <a href="../patterns/iterate-one-element.html" title="4.5.&nbsp;&#25805;&#20316;&#29305;&#23450; HTML &#20803;&#32032;&#30340;&#25152;&#26377;&#23454;&#20363;">&#25805;&#20316;&#29305;&#23450; <acronym title="HyperText Markup Language">HTML</acronym> &#20803;&#32032;&#30340;&#25152;&#26377;&#23454;&#20363;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/getcomputedstyle.html" title="4.14.&nbsp;&#33719;&#21462;&#20803;&#32032;&#26679;&#24335;">&#33719;&#21462;&#20803;&#32032;&#26679;&#24335;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/set-style.html" title="4.15.&nbsp;&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;">&#35774;&#32622;&#20803;&#32032;&#26679;&#24335;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/insert-before.html" title="4.7.&nbsp;&#22312;&#20803;&#32032;&#21069;&#25554;&#20837;&#20869;&#23481;">&#22312;&#20803;&#32032;&#21069;&#25554;&#20837;&#20869;&#23481;</a>
                        
                     </li>
                     <li>
                        <a href="../patterns/add-image.html" title="4.12.&nbsp;&#22312;&#27809;&#26377;&#26381;&#21153;&#22120;&#30340;&#24773;&#20917;&#19979;&#28155;&#21152;&#22270;&#29255;">&#22312;&#27809;&#26377;&#26381;&#21153;&#22120;&#30340;&#24773;&#20917;&#19979;&#28155;&#21152;&#22270;&#29255;</a>
                        
                     </li>
                  </ul>
               </div>
            </div>
            <div style="float: left">&#8592;&nbsp;<a class="NavigationArrow" href="frownies.html">&#26696;&#20363;&#65306;Frownies</a></div>
            <div style="text-align: right"><a class="NavigationArrow" href="accessbar.html">&#26696;&#20363;&#65306;Access Bar</a>&nbsp;&#8594;
            </div>
            <hr style="clear:both">
            <div class="footer">
               <p class="copyright">&#29256;&#26435; &copy; 2005 Mark Pilgrim &middot; <a title="&#21457;&#36865;&#32473;&#25105;&#26377;&#20110;&#27492;&#20070;&#30340;&#21453;&#39304;&#24847;&#35265;" href="mailto:mark@diveintomark.org">mark@diveintomark.org</a> &middot; <a href="../license/gpl.html" title="GNU &#36890;&#29992;&#20844;&#20849;&#35768;&#21487;&#35777;">&#20351;&#29992;&#26465;&#27454;</a></p>
            </div>
         </div>
      </div>
   </body>
</html>